<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="css/element.css">
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="app" style="height: 100%">
    <div class="box">
      <el-button size="small" type="primary" @click="pushRowToEnd">新增行</el-button>
      <el-table
              :data="tableData"
              border
              style="width: 100%"
              @row-contextmenu="rightMenuClick"
              @row-click="clickTableRow"
          >
        <el-table-column label="序号">
          <template slot-scope="scope">
            {{scope.$index + 1  }}
          </template>
        </el-table-column>

        <el-table-column label="名称">
          <template slot-scope="scope">
             <el-input size="small" v-model="scope.row.mc"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="单位">
          <template slot-scope="scope">
            <el-input size="small" v-model="scope.row.dw"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="预计到货数量">
          <template slot-scope="scope">
            <el-input size="small" v-model="scope.row.yjdhsl"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="实际到货数量">
          <template slot-scope="scope">
            <el-input size="small" v-model="scope.row.sjdhsl"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="单价">
          <template slot-scope="scope">
            <el-input size="small" v-model="scope.row.dj"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="金额">
          <template slot-scope="scope">
            {{parseInt(scope.row.dj) * parseInt(scope.row.yjdhsl)}}
          </template>
        </el-table-column>
        <el-table-column label="订货时间">
          <template slot-scope="scope">
            <el-date-picker
                    size="small"
                    prefix-icon="123"
                    style="width: 100%"
                    v-model="scope.row.dhsj"
                    type="date"
                    placeholder="点击选择"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd">
            </el-date-picker>
          </template>
        </el-table-column>
        <el-table-column label="预计到货时间">
          <template slot-scope="scope">
            <el-date-picker
                    size="small"
                    prefix-icon="123"
                    style="width: 100%"
                    v-model="scope.row.yjdhsj"
                    type="date"
                    placeholder="点击选择"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd">
            </el-date-picker>
          </template>
        </el-table-column>
        <el-table-column label="实际到货时间">
          <template slot-scope="scope">
            <el-date-picker
                    size="small"
                    prefix-icon="123"
                    style="width: 100%"
                    v-model="scope.row.sjdhsj"
                    type="date"
                    placeholder="点击选择"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd">
            </el-date-picker>
          </template>
        </el-table-column>
        <el-table-column label="备注">
          <template slot-scope="scope">
            <el-input size="small" v-model="scope.row.bz"></el-input>
          </template>
        </el-table-column>
      </el-table>

      <div id="menu" class="menuDiv" ref="menu">
        <ul class="menuUl">
          <li
              v-for="(item, index) in menuList"
              :key="index+'lol'"
              @click.stop="infoClick(index)"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
      <div class="enterClick isFlex" style="margin-top: 20px;">
        <el-button type="primary" @click="sendData">提交</el-button>
      </div>
    </div>
  </div>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="./js/xml2json.js"></script>
<script src="./js/index.js"></script>
</html>